<template>
    <div class="wrap">
        <h3>绑定企业账户</h3>
        <group label-width="2rem" label-margin-right="1rem" label-align="right">
            <x-input title="手机号" v-model="phone"></x-input>
            <x-input title="验证码" v-model="code">
                <x-button slot="right" type="primary" mini :text="btnText" :disabled="!isBtn" @click.native="sendCode" style="width:100px"></x-button>
            </x-input>
        </group>
        <div class="h20"></div>
        <x-button type="primary" @click.native="submit">确定</x-button>
    </div>
</template>

<script>
import Vue from 'vue'
import { Group, Cell, XInput, XButton, Loading, XDialog, Actionsheet, Divider } from 'vux'
import { WechatPlugin, ToastPlugin } from 'vux'
import { AlertPlugin, ConfirmPlugin } from 'vux'

import axios from '@/api/axios'
import api from '@/api/base.api'
import { Grid, GridItem } from 'vux'
export default {
    components: {
        Grid,
        GridItem,
        XInput,
        Group,
        XButton
    },
    mounted() {

    },
    data() {
        return {
            phone: "",
            code: "",
            isBtn: true,
            btnText: "发送验证码",
            time: 10,
        }
    },
    methods: {
        submit() {
            alert('提交数据');
        },
        sendCode() {
            if (this.time == 0) {
                this.isBtn = true;
                this.btnText = '发送验证码';
                this.time = 10;
                return false;
            } else {
                this.time--;
                this.btnText = `${this.time}s`;
                this.isBtn = false;
                setTimeout(function() {
                    this.sendCode();
                }.bind(this), 1000);
            }

        }
    }
}
</script>

<style lang="less">
h3 {
    text-align: center;
    font-size: 18px;
    margin: 100px auto 20px;
}

.body {
    height: 100%;
}
</style>
